<extend name="Public/base" />
<block name="style">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        }
        .slide-btn{
            width:100px;
            display:inline-block;
            border:1px solid;
            border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
            border-radius:5px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        .slide-btn .inner-on,.slide-btn .inner-off{
            width:151px;
            box-sizing:border-box;
            display: inline-block;
            position: relative;
            left:0;
            cursor: pointer;
            transition:left 0.5s;
        }
        .inner-on .left,.inner-off .left{
            width: 50px;
            color: #fff;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
            background:#58b058;
            text-align:center;
            display: inline-block;
            padding: 4px 0;
        }
        .inner-on .space,.inner-off .space{
            width: 51px;
            display: inline-block;
            box-sizing:border-box;
            padding: 4px 0;
            color: #fff;
            background-color: #f5f5f5;
            border-left: 1px solid #cccccc;
            border-right: 1px solid #cccccc;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
            background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
            border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        }
        .inner-on .right,.inner-off .right{
            width: 50px;
            color: #fff;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
            background:#f9a123;
            text-align:center;
            display: inline-block;
            padding: 4px 0;
        }
    </style>
</block>
<block name="body">
    <!-- 标题栏 -->
    <div class="main-title">
        <h2>{$meta_title}</h2>
    </div>

    <div class="slide-btn">
        <div class="inner-on" id="inner">
            <input style="display:none;" type="checkbox" checked>
            <span class="left">ON</span><span class="space">&nbsp;</span><span class="right">OFF</span>
        </div>
    </div>

</block>

<block name="script">
    <script src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>

    <script type="text/javascript">
        var is_pk = {$is_pk};

        if(is_pk == 0){
            document.getElementById("inner").style.left = -51 + "px";
            document.getElementById("inner").childNodes[1].checked = false;
            document.getElementById("inner").className = "inner-off";
        }else{
            document.getElementById("inner").style.left = 0;
            document.getElementById("inner").childNodes[1].checked = true;
            document.getElementById("inner").className = "inner-on";
        }

        document.getElementById("inner").onclick = function() {
            if (this.className == "inner-on") {
                //off
                $.ajax({
                    url: 'admin.php?s=/Manage/set_pk_status',
                    data:{
                        value: 0
                    },
                    success: function (res){
                        if(res == 1){
                            document.getElementById("inner").style.left = -51 + "px";
                            document.getElementById("inner").childNodes[1].checked = false;
                            document.getElementById("inner").className = "inner-off";
                        }
                    }
                })
            }else{
                //on
                $.ajax({
                    url: 'admin.php?s=/Manage/set_pk_status',
                    data:{
                        value: 1
                    },
                    success: function (res){
                        if(res == 1){
                            document.getElementById("inner").style.left = 0;
                            document.getElementById("inner").childNodes[1].checked = true;
                            document.getElementById("inner").className = "inner-on";
                        }
                    }
                })
            }
        }
    </script>

    <script type="text/javascript">
        //导航高亮
        highlight_subnav("{:U('Manage/pk_set')}");
    </script>
</block>
